<template>
	<view :class="themeName">
		<view class="apply-box" :style="{
			'width': `calc(100% - ${$px2rpx(20)}rpx)`,
			'top': `${$px2rpx(12)}rpx`, 
			'margin': `0 ${$px2rpx(10)}rpx`,
		}">
			<view class="leader-form m-b-20">
				<view class="apply-title m-b-20">{{$zhTran('请填写申请信息')}}</view>
				<u-form :model="formModel" ref="uForm" :error-type="['toast']">
					<u-form-item label-position="top" :label="$zhTran('会员等级')" required prop="level_name"
						:disabled="isPullUser">
						<u-input v-model="formModel.level_name" type="select" @click="selectLevel"
							:placeholder="$zhTran('请选择会员等级')" :disabled="isPullUser" />
					</u-form-item>
					<u-form-item label-position="top" :label="item.name" v-for="(item,idx) in formArr" :key="idx"
						:required="item.is_must?true:false">

						<u-input v-model="item.user_val" v-if="['text','textarea'].indexOf(item.type) > -1"
							:disabled="!item.is_edit" :placeholder="$zhTran('请填写')+item.name" :type="item.type"
							:maxlength="item.area_limit" />

						<view v-if="item.type=='select'">
							<u-input v-model="item.user_val" type="select" @click="selectChoose(item.value_select,idx)"
								:placeholder="$zhTran('请选择')+item.name" :disabled="!item.is_edit" />
						</view>

						<u-checkbox-group @change="boxChange($event,idx)" v-if="item.type=='checkbox'">
							<u-checkbox v-model="arr.checked" v-for="(arr, index) in item.value_check" :key="index"
								:name="arr.name" :disabled="!item.is_edit">
								{{ arr.name }}
							</u-checkbox>
						</u-checkbox-group>

						<u-radio-group v-model="item.user_val" v-if="item.type=='radio'">
							<u-radio v-for="(arr, oidx) in item.value_radio" :key="oidx" :name="arr.name"
								:disabled="arr.disabled || !item.is_edit">
								{{ arr.name }}
							</u-radio>
						</u-radio-group>

						<view class="m-t-24 bg-white p-24" v-if="item.type=='adj'">
							<uploader-adj v-model="item.user_image" :deletable="true" preview-size="160rpx"
								:disabled="!item.is_edit" :maxUpload="item.file_count" image-fit="aspectFill"
								:maxSize="item.file_size" :isTemp="true" />
						</view>

						<view class="m-t-24 bg-white p-24" v-if="item.type=='image'">
							<uploader v-model="item.user_image" :deletable="true" preview-size="160rpx"
								:disabled="!item.is_edit" :maxUpload="item.file_count" image-fit="aspectFill"
								:maxSize="item.file_size" :isTemp="true" />
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="functions">
			<button class="apply-btn" @click="submit">{{$zhTran('申请')}}</button>
		</view>

		<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="value_select"></u-select>

		<u-select v-model="selectLevelShow" :confirm-color="themeColor" cancel-color="#999"
			@confirm="levelChange($event)" :list="level_list"></u-select>


	</view>
</template>

<script type="text/javascript">
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apiUserLevelFieldList,
		apiUserLevelList,
		apiUserLevelApply
	} from "@/api/user"
	import {
		currentPage,
	} from "@/utils/tools";
	export default {
		props: {},
		data() {
			return {
				formArr: [],
				formModel: {},
				value_select: [],
				value_idx: '',
				selectShow: false,
				rules: {
					level_name: [{
						required: true,
						message: this.$zhTran('请选择会员等级'),
						trigger: ['change', 'blur'],
					}],
				},
				level_list: [],
				selectLevelShow: false,
				options: {}
			}
		},
		methods: {
			...mapActions(['getUser']),


			selectLevel() {
				if (this.isPullUser) return

				this.selectLevelShow = true
			},
			levelChange(e) {
				this.formModel.level_name = e[0].label
				apiUserLevelFieldList({
					level_name: e[0].label
				}).then((res) => {
					this.formArr = res
				}).catch(err => {})
			},

			selectChoose(data, idx) {
				this.value_idx = idx
				this.value_select = data
				this.selectShow = true
			},
			valueChange(e) {
				this.formArr[this.value_idx].user_val = e[0].label
			},
			boxChange(e, idx) {
				this.formArr[idx].user_val = e.join(',')
			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {

						var error_text = ''
						this.formArr.forEach((item, idx) => {
							if (item.is_must && error_text == '') {
								if (['adj', 'image'].indexOf(item.type) > -1) {
									if (item.user_image.length == 0) {
										error_text = '请上传' + item.name
										return false
									}
								} else if (['select', 'checked', 'raiod'].indexOf(item.type) > -1) {
									if (item.user_val == '') {
										error_text = '请选择' + item.name
										return false
									}
								} else {
									if (item.user_val == '') {
										error_text = '请填写' + item.name
										return false
									}
								}
							}
						})
						if (error_text != '') {
							uni.showModal({
								content: this.$zhTran(error_text),
								confirmColor: this.themeColor,
								confirmText: this.$zhTran('确定'),
								showCancel: false
							})
							return false
						}

						apiUserLevelApply({
							otherData: this.formArr,
							...this.formModel,
							...this.options
						}).then((res) => {
							//需要审核
							this.$Router.replace({
								path: '/bundle2/pages/level_apply/apply_status'
							})
						}).catch(err => {})
					} else {
						console.log('验证失败');
					}
				});
			}

		},
		computed: {
			isPullUser() {
				const {
					poster_level
				} = this.options
				return poster_level ? 1 : 0;
			}
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.options = this.$Route.query
			const {
				poster_level
			} = this.options
			apiUserLevelList({
				level_id: this.userInfo.level
			}).then((res) => {
				this.level_list = this.$zhTran(res)
				this.$refs.uForm.setRules(this.rules);
			}).then(() => {
				if (poster_level) {
					var level_arr = this.level_list.filter((item) => item.id == poster_level)
					this.levelChange(level_arr)
				}
			}).catch(err => {})
		},
	};
</script>

<style lang="scss" scoped>
	.apply-box {
		position: relative;
		min-height: calc(100vh - 170rpx);
		left: 0;
		z-index: 99;

		.leader-form {
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 10rpx;
			padding: 40rpx;

			.apply-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.agreement {
			@include font_color;
		}
	}


	.functions {
		position: relative;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 0 36rpx env(safe-area-inset-bottom) 36rpx;
	}

	.apply-btn {
		background-color: rgba(64, 115, 250, 1);
		color: #fff;
		font-size: 28rpx;
	}
</style>